<template>
  <div class="vy-cmp-exam-item vy-cmp-exam-multi">
    <!-- 考试内容 - 多选题 - 复用组件 -->
    <a-row>
      <a-col :span="6">
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>
      <a-col :span="2">
        <a-button type="link" @click="click_del_exam">删除</a-button>
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="3" class="vy-label">标题</a-col> -->
      <a-col :span="24">
        <a-input
          placeholder="请输入问题内容，最多输入1000字"
          v-model="source.title"
        ></a-input>
      </a-col>
    </a-row>
    <a-row v-for="(option, index) in source.options" :key="index">
      <a-col :span="3" class="vy-label">
        <input
          type="checkbox"
          v-model="answers"
          :name="source.title"
          :value="option.name"
        />
        选项 {{ option.name }}.</a-col
      >
      <a-col :span="21">
        <a-input placeholder="点此输入选项内容" v-model="option.answer">
          <a-icon
            slot="addonAfter"
            type="minus-circle"
            @click="click_delete_option(index)"
          />
        </a-input>
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="1" class="vy-label">&nbsp;</a-col> -->
      <a-col :span="24">
        <a-button
          icon="plus-circle"
          type="link"
          style="padding: 0;"
          @click="click_add_option"
          >添加选项</a-button
        >
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="3" class="vy-label vy-label-required">
        本题分数
      </a-col>
      <a-col class="score-content" :span="15">
        <div class="score-content-input">
          <a-input
            class="ant-input-normal"
            type="number"
            max="100"
            v-model="source.score"
          ></a-input
          ><span class="score-content-tip">分</span>
        </div>
        <div class="score-content-tip">
          （剩余可设置分数<span class="score-content-number">{{
            totalscore
          }}</span
          >分）
        </div>
      </a-col>
    </a-row>

    <!-- 正确答案 -->
    <!--    <a-row>-->
    <!--      <a-col :span="3" class="vy-label">正确答案</a-col>-->
    <!--      <a-col :span="21">-->
    <!--        <a-input placeholder="请输入正确答案" v-model="source.correctAnswer"></a-input>-->
    <!--      </a-col>-->
    <!--    </a-row>-->
    <a-row>
      <a-col :span="24" class="vy-label">
        <a-icon type="edit" /><span style="padding-left: 5px;"
          >设置答案解析</span
        >
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="vy-label">
        <a-textarea
          placeholder="请输入答案解析"
          v-model="source.analysis"
          :rows="4"
          style="resize: none;"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-exam-multi",
  props: ["title", "index", "source", "totalscore"],
  data() {
    return {
      answers: [],
    };
  },
  watch: {
    "source.options": {
      deep: true,
      handler(list) {
        // 监听并重置投票选择序列号
        list.forEach((item, index) => {
          item.id = +new Date();
          item.name = String.fromCharCode(65 + index);
        });
      },
    },
    answers: {
      deep: true,
      handler(list) {
        this.source.correctAnswer = "";
        list.forEach((item) => {
          if (this.source.correctAnswer) {
            this.source.correctAnswer = this.source.correctAnswer + "," + item;
          } else {
            this.source.correctAnswer = item;
          }
        });
      },
    },   
  }, 
  mounted() {
    if (
      this.source.correctAnswer != null &&
      this.source.correctAnswer != "null"
    ) {
      var s = this.source.correctAnswer;
      this.answers = s.split(",");
    }
    this.$nextTick(() => {
      this.add_default_option(); // 添加默认的选项
    });
  },
  methods: {
    // 添加默认的选项
    add_default_option() {
      // 没有选项列表时，追加默认选项
      if (this.source.options && !this.source.options.length) {
        for (let idx = 0; idx < 4; idx++) {
          this.add_option_item();
        }
      }
    },
    // 添加选项 - 实现方法
    add_option_item() {
      this.source.options.push({
        name: "",
        answer: "",
      });
    },
    // 按钮 - 添加选项
    click_add_option() {
      this.add_option_item();
    },
    // 按钮 - 删除选项
    click_delete_option(index) {
      this.source.options.splice(index, 1);
    },
    // 删除当前考试
    click_del_exam() {
      this.$emit("del_exam", this.index);
    },
  },
};
</script>
<style lang="scss">
.vy-cmp-exam-multi {
  padding: 10px;
  .vy-title {
    background: rgba(238, 244, 255, 1);
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    color: rgba(127, 159, 255, 1);
  }
  .vy-label {
    // text-align: right;
    // padding-right: 20px;
    text-align: left;
    padding-right: 10px;
  }

  .vy-label-required::after {
    content: "*";
    color: red;
    margin-left: 5px;
    vertical-align: middle;
  }
  .ant-row {
    padding: 5px 10px;
    .ant-btn-link {
      color: #444040;
    }
  }
}
</style>
